<template>
	<view>
		<!-- 头部 -->
			
		
		<wd-card type="rectangle" >
			
		  <template #title>
		    <view class="">
				{{ orderDetails.selectedTab }}
		    	{{ dictionaryStore.analysis('decoration_order_type', orderDetails.decorationType) }}-{{orderDetails.name}}
		    </view>
			<view class="flex-space" v-if="orderDetails.phone">
				<view class="phone">
					{{ orderDetails.phone }}
				</view>
				<image src="/static/image/clue/call.png" mode="aspectFit" style="width:35px;height:35px;"  @click="handleCallPhone(orderDetails.phone)"></image>
			</view>
		  </template>
		  <wd-row>
		    <wd-col :span="12">
		    	<view class="col-item">
		    		<view class="title">客户等级</view>
		    		<view class="content">
		    			{{dictionaryStore.analysis('decoration_order_customer_level', orderDetails.customerLevel)}}
		    		</view>
		    	</view>
		    </wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">微信号码</view>
					<view class="content">
						{{orderDetails.wxCode}}
					</view>
					<wd-icon v-if="orderDetails.wxCode" name="file-copy" size="16px" @click="handleCopyWxCode(orderDetails.wxCode)"></wd-icon>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">来源渠道</view>
					<view class="content">
						{{ channelList?.find((item) => item.id?.toString() === orderDetails.channelSource)?.name }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">楼盘名称</view>
					<view class="content">
						{{ propertyList?.find((item) => item.id === orderDetails.propertyName)?.name }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">详细地址</view>
					<view class="content">
						{{ orderDetails.address }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">房屋户型</view>
					<view class="content">
						{{dictionaryStore.analysis('decoration_order_house_type', orderDetails.houseType)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">房屋面积(㎡)</view>
					<view class="content">
						{{orderDetails.houseArea}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">上报人名称</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.creator)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">客服名称</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.saleId)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">设计师名称</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.designerId)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">产品设计师</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.productDesignerId)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">工程部监理</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.engineeringManagerId)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">监理</view>
					<view class="content">
						{{userStore.getUserNameById(orderDetails.supervisionId)}}
					</view>
				</view>
			</wd-col>
			<wd-col :span="12">
				<view class="col-item">
					<view class="title">合同总价</view>
					<view class="content">
						{{ orderDetails.contractPrice }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">创建时间</view>
					<view class="content">
						{{ dayjs(orderDetails.createTime).format('YYYY-MM-DD HH:mm:ss') }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">合同施工时间</view>
					<view class="content">
						{{ orderDetails.contractBeginTime&&dayjs(orderDetails.contractBeginTime).format('YYYY-MM-DD') }}-{{ orderDetails.contractEndTime&&dayjs(orderDetails.contractEndTime).format('YYYY-MM-DD') }}
					</view>
				</view>
			</wd-col>
			<wd-col :span="24">
				<view class="col-item">
					<view class="title">实际施工时间</view>
					<view class="content">
						{{ orderDetails.actualBeginTime&&dayjs(orderDetails.actualBeginTime).format('YYYY-MM-DD') }}-{{ orderDetails.actualEndTime&&dayjs(orderDetails.actualEndTime).format('YYYY-MM-DD') }}
					</view>
				</view>
			</wd-col>
		  </wd-row>
		</wd-card>

		
		<!-- tab -->
		<wd-tabs v-model="orderDetails.selectedTab" sticky >
		  <block v-for="item in list" :key="item">
		    <wd-tab :title="`${item}`" :name="item">
		      <record v-if="item==='记录列表'&& orderDetails.selectedTab === '记录列表'&&orderDetails.id" :order-id="orderDetails.id" :approve-type="orderDetails.approveType"></record>
			  <message-info v-if="item==='量房信息'&& orderDetails.selectedTab === '量房信息'" :order-id="orderDetails.id" :approve-type="orderDetails.approveType"></message-info>
			  <plan-info v-if="item==='方案'&& orderDetails.selectedTab === '方案'" :order-id="orderDetails.id" :approve-type="orderDetails.approveType"></plan-info>
			  <one-see v-if="item==='一见'&& orderDetails.selectedTab === '一见'" :order-id="orderDetails.id" :approve-type="orderDetails.approveType"></one-see>
			  <two-see v-if="item==='二见'&& orderDetails.selectedTab === '二见'" :order-id="orderDetails.id" :approve-type="orderDetails.approveType"></two-see>
			  <contract-info v-if="item==='合同信息'&& orderDetails.selectedTab === '合同信息'" :order-id="orderDetails.id" :companyId="orderDetails.companyId" :approve-type="orderDetails.approveType"></contract-info>
			   <engineering-node 
			  	v-if="item==='施工节点'&& orderDetails.selectedTab === '施工节点'" 
				:engineering-id="orderDetails.engineeringId" 
				:company-id="orderDetails.companyId"
				:order-id="orderDetails.id"
				:contract-id="orderDetails.contractId"
				:actualEndTime="orderDetails.actualEndTime"
				:actualBeginTime="orderDetails.actualBeginTime"
				:approve-type="orderDetails.approveType"
				/>
		    </wd-tab>
		  </block>
		</wd-tabs>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
  import {
    propertyManageList,
    channelManageList,
    getOderList
  } from '@/api/order/index.js'
  import {
    getOderDetail
  } from '@/api/order/detail.js'
  import dayjs from 'dayjs';
  import Record from './components/record/record.vue'
  import MessageInfo from './components/message-info/message-info.vue'
  import PlanInfo from './components/plan-info/plan-info.vue'
  import OneSee from './components/one-see/one-see.vue'
  import TwoSee from './components/two-see/two-see.vue'
  import ContractInfo from './components/contract-info/contract-info.vue'
  import EngineeringNode from '@/packageA/pages/project/components/engineering-node/engineering-node.vue'
	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 楼盘列表
	const propertyList = ref([])
	// 获取楼盘列表
	const handleGetPropertyList = () => {
		const params = {
			pageSize: -1
		}
		propertyManageList(params).then((data) => {
			propertyList.value = data.list
		}).catch((error) => {
			uni.showToast({
				title: error,
				icon: 'error'
			})
		})
	}
	// handleGetPropertyList()
	// 渠道列表
	const channelList = ref([]);
	// 处理获取渠道列表
	const handleGetChannelList = () => {
	  const params = {
	    pageSize: -1,
	  };
	  channelManageList(params)
	    .then((data) => {
	      channelList.value = [
	        {label: '全部渠道', value: 0},
	        ...data.list.map((item) => ({
	          ...item,
	          label: item.name,
	          value: item.id
	        }))
	      ];
	    })
	    .catch(({ message }) => {
	      MessagePlugin.error(message);
	    });
	};
	
	// handleGetChannelList();
	// 详情数据
	const  orderDetails= ref({
		selectedTab:''
	})
	// 处理返回
	const handleSubmit = async () => {
		uni.navigateBack()
	}
	
	const orderId = ref()
	onLoad((option)=>{
		console.log('4414')
		orderId.value = option.id
		const params ={
			id:option.id
		}
		// getOderDetail(params).then((data)=>{
		// 	orderDetails.value = data
		// })
		Promise.all([
					getOderDetail(params),
					handleGetPropertyList(),
					handleGetChannelList()
				]).then(([detailData]) => {
					detailData.currentOrderStage = detailData.orderStage; // 设置当前订单阶段
					detailData.operateType = option.operateType; // 设置当前订单阶段
					detailData.approveType = option.approveType; // 设置当前订单阶段
					orderDetails.value = detailData || {}
					orderDetails.value.selectedTab = ''
					    if (orderDetails.value.engineeringId) {
      list.value.push('施工结算', '施工节点', '施工放样');
    }
					let selectedTab = list.value[0];
    const { operateType, approveType } = orderDetails.value;
    console.log(operateType,'operateType');
    console.log(approveType,'approveType');
    
    if (operateType) {
      let operateTypeConfig = { tab: '' };
      try {
        const operateTypeDictionary =
          dictionaryStore.get('decoration_order_operate_type').find((item) => item.value === operateType) || {};
        operateTypeConfig = JSON.parse(operateTypeDictionary.remark);
        if (operateTypeConfig.tab) selectedTab = operateTypeConfig.tab;
      } catch {
        // MessagePlugin.warning('解析操作配置失败，请联系管理员。');
      }
    } else if (approveType) {
      let approveTypeConfig = { tab: '' };
      try {
        const approveTypeDictionary =
          dictionaryStore.get('order_approval_type').find((item) => item.value === approveType) || {};
        approveTypeConfig = JSON.parse(approveTypeDictionary.remark);
        console.log(approveTypeDictionary,'approveTypeDictionary');
        console.log(approveTypeConfig,'approveTypeConfig');
        
        if (approveTypeConfig.tab) selectedTab = approveTypeConfig.tab;
      } catch {
        // MessagePlugin.warning('解析审批配置失败，请联系管理员。');
      }
    }
    orderDetails.value.selectedTab = selectedTab;
	console.log(orderDetails.value.selectedTab ,'selectTab');
	console.log(list.value ,'list');

				})
		
	})
// 	const list = computed(() => {
//   const result = ['记录列表']; // 始终包含默认标签
  
//   // 只有订单数据加载后才添加其他标签
//   if (orderDetails.value.currentOrderStage) {
//     result.push('量房信息', '方案', '一见', '二见', '合同信息');
    
//     if (orderDetails.value.engineeringId) {
//       result.push('施工结算', '施工节点', '施工放样');
//     }
//   }
  
//   return result;
// });
const list = ref(['记录列表','量房信息', '方案', '一见', '二见', '合同信息'])

	// 处理拨打电话
	const handleCallPhone = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber
		})
	}
	// 处理复制微信号码
	const handleCopyWxCode = (data) => {
		uni.setClipboardData({
			data
		})
	}
</script>
<style lang="scss" scoped>
	.col-item {
		display: flex;
		.title {
			width: 182rpx;
		}
		.content {
			color: #333;
			flex: 1;
		}
	}
	.page-container {
	  display: flex;
	  flex-direction: column;
	  height: 100vh;
	}
	.fixed-search {
	  position: sticky;
	  top: 0;
	  z-index: 100;
	  background-color: #fff;
	}
	.scroll-content {
	  flex: 1;
	  overflow-y: auto;
	  padding: 10px;
		box-sizing: border-box;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE 和 Edge */
	}
	.flex-space {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.phone {
			font-size: 20px;
		}
	}
</style>